<script setup lang="ts">
import { ref, reactive, onMounted, onActivated, computed , getCurrentInstance} from "vue";
import SocketService from '@/api/websocket';
import videoPlay from "@/components/videoPlay.vue";
import bigImage from "@/components/bigImage.vue";
import TopHeader from "./components/header.vue";
import LeftMenu from "./components/menu.vue";
import { useStore } from "vuex";
import Bus from "@/utils/eventBus";
import router from "@/router";
import taskDetail from "./emergency/taskDetail.vue";
const { proxy }:any = getCurrentInstance();
const ENV = ref(import.meta.env.VITE_ENV);
const store = useStore();
const isCollapse = ref(false);
const videoInfo = ref<any>({});

const editableTabsValue = ref<any>("");
const editableTabs = ref<any>([]);
const tabChange = (targetName: string) => {
   router.push({ name: targetName});
   
}
const removeTab = (targetName: string) => {
  console.log(targetName)
  const tabs = editableTabs.value;
  let activeName = editableTabsValue.value;
  if (activeName === targetName) {
    tabs.forEach((tab:any, index:number) => {
      if (tab.router === targetName) {
        const nextTab = tabs[index + 1] || tabs[index - 1];
        if (nextTab) {
          activeName = nextTab.router;
        }
      }
    });
  }
  editableTabsValue.value = activeName;
  editableTabs.value = tabs.filter((tab:any) => tab.router !== targetName);
  router.push({ name: activeName})
};
const isLoading  = ref(false);
onMounted(async () => {
  await store.dispatch("getAppConfig"); 
  await store.dispatch('getUser')
  isLoading.value = true;
  let params = router.currentRoute.value;
  editableTabs.value.push({
      title:params.meta.name,
      router:params.name
     });
  editableTabsValue.value = params.name
  Bus.$on("change-router", (data: any) => {
    
    editableTabsValue.value = data.router
    let find = editableTabs.value.find((v: any)=>v.router == data.router)
    if(!find){
      editableTabs.value.push(data);
    }
  });
  Bus.$on("isCollapse", (data: any) => {
    isCollapse.value = data;
  });
  // Bus.$on("user-login", (data: any) => {
  //   proxy.$ws.send({
  //     type:'init',
  //     userId:store.state.user.user_id,
  //   })
  // });
  SocketService.Instance.connect();
  
});
</script>

<template>
  <div class="home-container"  :class="{'isCollapse':isCollapse,'is-login':store.state.user.name}">
    <LeftMenu/>
    <TopHeader/>
    <div class="main-container">
      <el-tabs
        v-model="editableTabsValue"
        type="card"
        class="nav-tabs"
        closable
        @tab-change="tabChange"
        @tab-remove="removeTab"
      >
        <el-tab-pane
          v-for="item in editableTabs"
          :key="item.router"
          :label="item.title"
          :name="item.router"
        >
        </el-tab-pane>
      </el-tabs>
      <div class="app-view" v-if="isLoading">
        <template v-if="ENV === 'development'">
          <router-view></router-view>
        </template>
        <template v-else>
          <router-view v-slot="{ Component }">
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </router-view>
        </template>
        
      </div>
    </div>
    <videoPlay />
    <bigImage />
    <!-- 应急详情 -->
    <task-detail/>
  </div>
</template>

<style  lang="scss">
.home-container {
  width: 100%;
  height: 100%;
  padding-left: 200px;
  position: relative;
  transition: padding 1s;
  opacity:0;
  &.is-login{
    opacity:1;
  }
  .app-menu{
    transition: width 1s;
  }
  &.isCollapse{
     padding-left: 65px;
    .app-menu{
      width:65px;
      padding-top:90px;
    }
  }
  .main-container {
    width: 100%;
    height: calc(100% - 90px);
    .nav-tabs {
      background: #141414;
      border-bottom: 1px solid #181818;
      .el-tabs__header {
        margin: 0;
      }
      .el-tabs__nav,
      .el-tabs__item {
        border: none;
      }
      .is-active{
        border-bottom: 2px solid #1a90ff !important;
      }
    }
    .app-view {
      padding: 10px;
      height: calc(100% - 41px);
      overflow: auto;
    }
  }
  .left-menu {
    background: #1f1f1f;
    width: 200px;
    
    &.sou {
      width: 80px;
    }
  }
}
</style>
